<script setup>
import FirstTitle from "@comp/FirstTitle";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { onMounted } from "vue";
import { searchDataPzzh } from "@/api/search";
import { addOrUpdatePzzh } from "@/api/addOrUpdate";

const city = window.globalObj.name;
const editorRef = shallowRef();
const editorRef1 = shallowRef();
const editorRef2 = shallowRef();

const toolbarConfig = {};
const toolbarConfig1 = {};
const toolbarConfig2 = {};
const editorConfig = {
  placeholder: "请输入内容...",
};
const mode = ref("default");
const mode1 = ref("default");
const mode2 = ref("default");

// 加载html
const initHtml = () => {
  searchDataPzzh({ m: "时机顺序-战备等级" }).then((res) => {
    const { data } = res;
    valueHtml.value = data.find((x) => x.k === "战备等级三级")?.v || "";
    valueHtml1.value = data.find((x) => x.k === "战备等级二级")?.v || "";
    valueHtml2.value = data.find((x) => x.k === "战备等级一级")?.v || "";
  });
};

const handleCreated = (editor) => {
  editorRef.value = editor; // 记录 editor 实例，重要！
};
const handleCreated1 = (editor) => {
  editorRef1.value = editor; // 记录 editor 实例，重要！
};
const handleCreated2 = (editor) => {
  editorRef2.value = editor; // 记录 editor 实例，重要！
};

const valueHtml = ref(
  "转进时机：当台海方向、南海方向或朝鲜半岛方向出现重大危机，我市周边地区出现重大异常，局势紧张，有可能发生武装冲突时。<br/>主要工作：<br/>①接受上级有关指示，落实指挥部编成和保障措施；<br/>②检查指挥设施，做好基本指挥所开设准备；<br/>③进行战备动员；<br/>④加强战备值班和通信保障，整编人防专业队伍；<br/>⑤建立对空观察和核化生观测网络；<br/>⑥加强空情接收、传递；<br/>⑦控制人员外出，召回在外人员；<br/>⑧拟制、修改人防工程平战转换方案，启封、检修、抢修人民防空工程，组织人口疏散地域准备，补充装备器材和战备物资；<br/>⑨修订人民防空方案；<br/>⑩组织临战训练和战备演练，开展后勤、技术等方面的各项保障；<br/>⑪组织重要目标伪装与防护准备，检测防空警报设施。"
);

const valueHtml1 = ref(
  "转进时机当台海或南海或朝鲜半岛方向局势急剧恶化，对我市已构成直接军事威胁，我市部分重要目标可能遭受打击时。<br/>主要工作：<br/>①基本指挥所进入战时指挥状态；<br/>②深入进行战备动员；<br/>③战备值班人员24小时严守岗位，指挥通顺畅；<br/>④严密掌握敌人动向，查明敌人企图；<br/>⑤扩编人防专业队伍；组织临战训练；<br/>⑥组织城市人口早期疏散；<br/>⑦实施人防空工程平战转换；<br/>⑧组织落实重要目标防护措施。"
);
const valueHtml2 = ref(
  "转进时机：当台海或南海或朝鲜半岛方向局势极度紧张，战争征候十分明显，国家已发布战争动员令或发布局部战争动员令时。<br/>主要工作：<br/>①人民防空由平时体制转入战时体制，指挥机构全部进入战时指挥位置，并按防空袭方案开展临战工作；<br/>②进行全社会临战动员；<br/>③指挥部人员昼夜坐班，无线电指挥网全时守听，保障不间断指挥；<br/>④人防专业队伍完成扩编，按战时编制齐装满员，完成集结、部署；<br/>⑤完善防空袭方案；<br/>⑥组织城市人口临战疏散，完善紧急疏散方案；<br/>⑦定时接收掌握空情，准备发放防空袭警报。"
);

const saveProgramme = () => {
  ElMessageBox.confirm(`确定要保存吗?`, "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    customClass: "message-box",
  }).then(() => {
    addOrUpdatePzzh({
      m: "时机顺序-战备等级",
      data: [
        {
          k: "战备等级三级",
          v: valueHtml.value,
        },
        {
          k: "战备等级二级",
          v: valueHtml1.value,
        },
        {
          k: "战备等级一级",
          v: valueHtml2.value,
        },
      ],
    })
      .then(() => {
        ElMessage.success("操作成功");
      })
      .catch(() => {});
  });
};

onMounted(() => {
  initHtml();
});
onBeforeUnmount(() => {
  const editor = editorRef.value;
  const editor1 = editorRef1.value;
  const editor2 = editorRef2.value;
  if (!editor) return;
  if (!editor1) return;
  if (!editor2) return;
  editor.destroy();
  editor1.destroy();
  editor2.destroy();
});
</script>
<template>
  <div class="">
    <div class="top-15">
      战备等级转进分为三级、二级、一级3个等级，可逐级转进，也可越级转进。具体情况如下：
    </div>

    <FirstTitle name="战备等级：三级" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef"
        :defaultConfig="toolbarConfig"
        :mode="mode"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml"
        :defaultConfig="editorConfig"
        :mode="mode"
        @onCreated="handleCreated"
      />
    </div>

    <FirstTitle name="战备等级：二级" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef1"
        :defaultConfig="toolbarConfig1"
        :mode="mode1"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml1"
        :defaultConfig="editorConfig"
        :mode="mode1"
        @onCreated="handleCreated1"
      />
    </div>

    <FirstTitle name="战备等级：一级" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef2"
        :defaultConfig="toolbarConfig2"
        :mode="mode2"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml2"
        :defaultConfig="editorConfig"
        :mode="mode2"
        @onCreated="handleCreated2"
      />
    </div>

    <div class="flex-justify-end top-20">
      <el-button type="primary" class="save-btn" @click="saveProgramme"
        >保存</el-button
      >
    </div>
  </div>
</template>
<style scoped lang="scss"></style>